<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="assets/css/font-awesome.min.css" />
  <!--[if IE 7]>
    <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
  <![endif]-->
  <link rel="stylesheet" href="assets/css/jquery-ui-1.10.3.full.min.css">
  <link rel="stylesheet" href="assets/css/ace.min.css" />
  <link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
  <link rel="stylesheet" href="assets/css/ace-skins.min.css" />
  <link rel="stylesheet" href="css/style.css"/>
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
<title>已完结订单</title> 
</head>
<body>
<div id="app">
<div class="page-content">
<!--待确认订单样式-->
<div class="d_Confirm_Order_style">
 <div class="row">
   <div class="col-xs-12">
	<h3 class="header smaller lighter blue">已完结订单</h3>
	<div class="search_style">
      <div class="title_names">搜索查询</div>
      <ul class="search_content clearfix">
          <li><label class="lf">项目名称</label><input name="项目名称" type="text"  class="text_add" v-model="searchObj.project_name"/></li>
          <li><label class="lf">订单编号</label><input name="订单编号" type="text"  class="text_add" v-model="searchObj.o_number"/></li>
          <li><label class="lf">预计加油时间</label><input name="预计加油时间" class="inline laydate-icon" v-model="searchObj.prime_date" id="start" style=" margin-left:10px;"></li>
          <li style="width:90px;"><button  type="button" class="btn_search" @click="searchAll()">查询</button></li>
      </ul>
    </div>
	<div class="table-responsive">
	  <table id="sample-table-2" class="table table-striped table-bordered table-hover">
		<thead>
         <tr>
    <!--      <th class="center"><label><input type="checkbox" class="ace" /><span class="lbl"></span></label></th>-->
		  <th width="60px">序列号</th>
		  <th>项目名称</th>
		  <th >订单编号</th>
          <th>实际加油时间</th>
		  <th >加油地点</th>
          <th width="100px">船名</th>
          <th width="100px">品种</th>
          <th width="80px">单价</th>
          <th width="80px">订单数量（吨）</th>
		  <th width="100px">实际加油数量（吨）</th>
          <th width="80px">小计（元）</th>
          <th width="80px">总价（元）</th>
          <th>供应商</th>
          <th>加油单扫描件浏览</th>
          <th>确认时间</th>
          <th width="60px">供应商评分</th>
         </tr>
		</thead>
         <tbody>
         <tr v-for="i in zData">
             <td>{{i.o_id}}</td>
             <td>{{i.project_name}}</td>
             <td ><a href="#" class="Numbering">{{i.o_number}}</a></td>
             <td>{{i.prime_date}}</td>
             <td >{{i.place}}</td>
             <td style="border-right:0px;">{{i.boat_name}}</td>
             <td colspan="5" class="table_jiage">
                 <table width="100%" cellpadding="0" cellspacing="0" v-for="(j,index) in i.price">
                     <tbody><tr style=" border-bottom:1px solid #ddd">
                         <td >{{i.breed[index]}}</td><td >{{j}}</td><td >{{i.purchase_quantity[index]}}</td><td >{{i.purchase_quantity[index]}}</td>
                         <td >{{j*i.purchase_quantity[index]}}</td>
                     </tr>
                     </tbody>
                 </table>
             </td>
             <td>{{i.total}}</td>

             <td><a href="#" class="gys_xinxi">{{i.supplier}}</a></td>
           <td><button value="" class="btn btn-primary smj_Browse">浏览</button></td>
           <td>{{i.date}}</td>
             <td>{{(((i.oil * 1) + (i.serve * 1) + (i.other * 1)) / 3).toFixed(2)}}</td>
          </tr>

      </tbody>
  </table>
  <div class="page_style">
      <div class="block">
          <span class="demonstration">完整功能</span>
          <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="page"
                  :page-sizes="[10, 15, 20]"
                  :pageSize="10"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total=total>
          </el-pagination>
      </div>
  </div>
</div>
</div>
</div>
</div>
<!--已完结订单信息-->
<div id="end_Orderform" style="display:none">
  <div class="page-content">
  <div class="Order_Details_style">
  <div class="Numbering">项目编号:<b>NJHDXJ201509-001</b></div> 
  <div>
   <ul class="clearfix">
    <li><label class="label_name">项目名称</label><span>2016年加油项目</span></li>
    <li><label class="label_name">加油地点</label><span>南京扬子江码头</span></li>
    <li><label class="label_name">预计加油时间</label><span>2016-04-19</span></li>
    <li><label class="label_name">询价模板</label>2015年模</li>
    <li><label class="label_name">船名</label><span>长江号</span></li>
    <li><label class="label_name">船只联系人</label><span>刘怀帮</span></li>
    <li><label class="label_name">船只联系手机号</label><span>13505140602</span></li>
   </ul>
  </div>
   <div class="xi_xinxi_js">
     <table id="" class="table table-striped table-bordered table-hover">
      <thead>
       <tr>
        <th>供应商名称</th>
        <th>联系人</th>
        <th>联系人手机</th>
        <th>联系人邮箱</th>
        <th>产品名称</th>
        <th width="100">供应商报价（元/吨）</th>
        <th width="80">采购数量（元）</th>
        <th width="80">小计</th>
        <th width="80">合计（元）</th>
        <th>备注</th>
        <th>加油单扫描</th>
        <th>合同附件</th>
       </tr>
      </thead>
     <tbody>
      <tr>
       <td>南京中石油</td>
       <td>刘怀帮</td>
       <td>14542345434</td>
       <td>53456@qq.com</td>
       <td class="fg"><p class="fg-1">0#柴油</p><p>18#航空燃油</p></td>
       <td class="fg"><p class="fg-1">145</p><p>178</p></td>
       <td class="fg"><p class="fg-1">4</p><p>6</p></td>
       <td class="fg"><p class="fg-1">400</p><p>618</p></td>
       <td>790</td>
       <td>货到付款</td>
        <td><button type="button" class="btn btn-info Refuel_btn">浏览</button></td>
       <td><button type="button" class="btn btn-info annex_btn">浏览</button></td>
      </tr>
     </tbody>
     </table>
   </div>
   <div class="Tips_content"><h4>加油单据：</h4>加油单据.png</div>
   <div class="Tips_content">
    <h4>评价：</h4>
     <ul class="score_style">  
<li class="clearfix scores">
	<p style="font-size:20px" class="lf">油品：</p>
	<div id="star1" class="lf" data-rating="1"></div>
	<div id="result1"  class="lf Rating"></div>
</li>
<li class="clearfix scores">
	<p style="font-size:20px" class="lf">服务：</p>
	<div id="star2" class="lf" data-rating="2"></div>
	<div id="result2" class="lf Rating"></div>
</li>
<li class="clearfix scores">
	<p style="font-size:20px" class="lf">其他：</p>
	<div id="star3" class="lf" data-rating="3" ></div>
	<div id="result3" class="lf Rating"></div>   
</li>
</ul>
   </div>
   <div class="Tips_content"><h4>订单要求：</h4>请供应商及时响应订单，并在订单要求的内容及时供货。</div>
   <div class="Tips_content"><h4>询价说明：</h4>请供应商及时响应订单，并在订单要求的内容</div>
  </div>
 </div>
</div>
<!--扫描件样式-->
<div id="tong" class="" style="display:none;"><img src="images/1.jpg" width="448"/></div>
<!--加油单-->
<div id="Refuel_style" class="" style="display:none;"><img src="images/jyd.png" width=""/></div>
</div>
</div>
	<!--[if !IE]> -->
		<script src="assets/js/jquery.min.js"></script>
		<!-- <![endif]-->
		<!--[if IE]>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<![endif]-->
		<!--[if !IE]> -->
		<script type="text/javascript">
			window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
		</script>
		<!-- <![endif]-->
		<!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
</script>
<![endif]-->
	<script type="text/javascript">
        if("ontouchend" in document) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
    </script>
	<script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/layer/layer.js" type="text/javascript"></script>
    <script src="assets/laydate/laydate.js"  type="text/javascript"></script>
    <script src="js/jquery.raty.js" type="text/javascript"></script>
<script type="text/javascript">
 //弹出一个iframe层
$('.gys_xinxi').on('click', function(){
    layer.open({
        type: 2,
        title: '供应商信息',
        maxmin: true,
        shadeClose: true, //点击遮罩关闭层
        area : ['580px' , '400px'],
        content: '供应商信息.html'
    });
});
$('.Numbering').on('click', function(){
    layer.open({
        type: 1,
        title: '订单信息',
        maxmin: true,
        shadeClose: true, //点击遮罩关闭层
        area : ['980px' , '430px'],
        content: $('#end_Orderform')
    });
});
//加油单浏览
$('.Refuel_btn').on('click', function(){
    layer.open({
    type: 1,
	title:'加油单浏览',
	area: ['900px','auto'],
	shadeClose: true,
	content: $('#Refuel_style')
    });
});
//浏览附件
$('.smj_Browse').on('click', function(){
    layer.open({
    type: 1,
	title:'合同扫描件浏览',
	area: ['516px',''],
	shadeClose: true,
	content: $('#tong')
    });
});
laydate({
    elem: '#start', //目标元素'
    event: 'focus' //响应事件。
});
 //1. 只读获取评分数
$('#star1').raty({  
readOnly : true,  
score    : 3 ,
path: "images",
starOff: 'star-off-big.png',
starOn: 'star-on-big.png', 
size:24
}); 


$('#star2').raty({  
readOnly : true,  
score    : 2 ,
path: "images",
starOff: 'star-off-big.png',
starOn: 'star-on-big.png', 
size:24
});
$('#star3').raty({  
readOnly : true,  
score    : 5 ,
path: "images",
starOff: 'star-off-big.png',
starOn: 'star-on-big.png', 
size:24
}); 
            //2. 开始就有一个 callback  
            //$('#score1').raty({  
//              score: function() {  
//                return $(this).attr('data-rating');  
//              },   
//              click: function(score, evt) {  
//                alert('ID: ' + $(this).attr('id') + '\nscore: ' + score + '\nevent: ' + evt);  
//              }  
//            });
			
</script>
<script>
    new Vue({
        el:"#app",
        data:{
            //总数据
            zData:[],

            //搜索对象
            searchObj:{
                o_type:'已完结',
                project_name:'',
                o_number:'',
                prime_date:''
            },
            //当前页数
            page:1,
            //每页显示数
            pageSize:10,
            //总条目数
            total:0,


        },
        methods:{
            getInfo(){
                axios.get("orders/已完结/"+(this.page-1)*this.pageSize+"/"+this.pageSize+"/ordersType.do").then(dt => {
                    this.zData = [];
                    for (let i = 0; i < dt.data.length; i++) {
                        let comData = {
                            o_id: dt.data[i].o_id,
                            project_name: dt.data[i].project_name,
                            o_number: dt.data[i].o_number,
                            prime_date: dt.data[i].prime_date,
                            place: dt.data[i].place,
                            boat_name: dt.data[i].boat_name,
                            supplier: dt.data[i].supplier,
                            date: dt.data[i].date,
                            oil:dt.data[i].oil,
                            serve: dt.data[i].serve,
                            other: dt.data[i].other,
                            breed: dt.data[i].breed.split(","),
                            price: dt.data[i].price.split(","),
                            purchase_quantity: dt.data[i].purchase_quantity.split(","),
                            total: 0
                        };
                        for (let j = 0; j < comData.price.length; j++) {
                            comData.total += parseFloat(comData.price[j]) * parseFloat(comData.purchase_quantity[j]);
                        }
                        this.zData.push(comData);
                    }
                    console.log(this.zData);
                })
            },
            setType(type,oid){
                axios.get("orders/"+type+"/"+oid+"/update.do").then(dt =>{
                    if(dt.data){
                        this.$message({
                            type: 'success',
                            message: '修改成功!'
                        });
                        this.getInfo()
                        this.total--
                    }else {
                        this.$message({
                            type: 'info',
                            message: '修改失败'
                        });
                    }
                })
            },
            handleSizeChange(val) {
                this.pageSize=val
                this.getInfo()
            },
            handleCurrentChange(val) {
                this.page=val
                this.getInfo()
            },

            searchAll(){
                if (this.searchObj.project_name.trim() !== '' | this.searchObj.o_number.trim() !== '' || this.searchObj.prime_date.trim() !== '') {
                    axios.get("orders/searchAll.do", {
                        params: this.searchObj
                    })
                        .then(dt => {
                            this.zData = [];
                            for (let i = 0; i < dt.data.length; i++) {
                                let comData = {
                                    o_id: dt.data[i].o_id,
                                    project_name: dt.data[i].project_name,
                                    o_number: dt.data[i].o_number,
                                    prime_date: dt.data[i].prime_date,
                                    place: dt.data[i].place,
                                    boat_name: dt.data[i].boat_name,
                                    supplier: dt.data[i].supplier,
                                    date: dt.data[i].date,
                                    oil:dt.data[i].oil,
                                    serve:dt.data[i].serve,
                                    other:dt.data[i].other,
                                    breed: dt.data[i].breed.split(","),
                                    price: dt.data[i].price.split(","),
                                    purchase_quantity: dt.data[i].purchase_quantity.split(","),
                                    total: 0
                                };
                                for (let j = 0; j < comData.price.length; j++) {
                                    comData.total += parseFloat(comData.price[j]) * parseFloat(comData.purchase_quantity[j]);
                                }
                                this.zData.push(comData);
                            }
                        })
                } else {
                    this.$message({
                        type: 'info',
                        message: '您还没有输入值'
                    });
                }
            }

        },
        mounted(){
            axios.get("orders/已完结/total.do").then(dt =>{
                this.total=dt.data
            })
            this.getInfo();
        }
    })
</script>

</body>
</html>
